<route lang="json5" type="page">
    {
      layout: 'default',
      needLogin: true,
      style: {
        navigationBarTitleText: '数据报告',
        enablePullDownRefresh: true,
      },
    }
  </route>

<script setup lang="ts">
import { computed, ref } from 'vue'

// 搜索关键词
const searchKeyword = ref('')

// 当前选中的楼层id
const selectedFloorId = ref<number | null>(null)

// 建筑数据结构
const buildingData = ref([
  {
    id: 1,
    name: 'A栋',
    children: [{
      id: 11,
      name: '1号楼',
      children: [{
        id: 111,
        name: '1层',
        rooms: [
          { id: 1111, roomNumber: '101-A', floorId: 111 },
          { id: 1112, roomNumber: '101-B', floorId: 111 },
          { id: 1113, roomNumber: '102', floorId: 111 },
        ],
      }, {
        id: 112,
        name: '2层',
        rooms: [
          { id: 1121, roomNumber: '201-A', floorId: 112 },
          { id: 1122, roomNumber: '201-B', floorId: 112 },
          { id: 1123, roomNumber: '202', floorId: 112 },
        ],
      }, {
        id: 113,
        name: '3层',
        rooms: [
          { id: 1131, roomNumber: '301-A', floorId: 113 },
          { id: 1132, roomNumber: '301-B', floorId: 113 },
          { id: 1133, roomNumber: '302', floorId: 113 },
          { id: 1134, roomNumber: '302', floorId: 113 },
          { id: 1135, roomNumber: '303', floorId: 113 },
          { id: 1136, roomNumber: '304', floorId: 113 },
          { id: 1137, roomNumber: '305', floorId: 113 },
          { id: 1138, roomNumber: '306-A', floorId: 113 },
        ],
      }, {
        id: 114,
        name: '4层',
        rooms: [
          { id: 1141, roomNumber: '401-A', floorId: 114 },
          { id: 1142, roomNumber: '401-B', floorId: 114 },
          { id: 1143, roomNumber: '402', floorId: 114 },
        ],
      }, {
        id: 115,
        name: '5层',
        rooms: [
          { id: 1151, roomNumber: '501-A', floorId: 115 },
          { id: 1152, roomNumber: '501-B', floorId: 115 },
          { id: 1153, roomNumber: '502', floorId: 115 },
        ],
      }],
    }, {
      id: 12,
      name: '2号楼',
      children: [{
        id: 121,
        name: '1层',
        rooms: [
          { id: 1211, roomNumber: '101', floorId: 121 },
          { id: 1212, roomNumber: '102', floorId: 121 },
        ],
      }, {
        id: 122,
        name: '2层',
        rooms: [
          { id: 1221, roomNumber: '201', floorId: 122 },
          { id: 1222, roomNumber: '202', floorId: 122 },
        ],
      }],
    }, {
      id: 13,
      name: '3号楼',
      children: [{
        id: 131,
        name: '1层',
        rooms: [
          { id: 1311, roomNumber: '101', floorId: 131 },
          { id: 1312, roomNumber: '102', floorId: 131 },
        ],
      }],
    }, {
      id: 14,
      name: '4号楼',
      children: [{
        id: 141,
        name: '1层',
        rooms: [
          { id: 1411, roomNumber: '101', floorId: 141 },
          { id: 1412, roomNumber: '102', floorId: 141 },
        ],
      }],
    }],
  },
])

// 展开状态管理
const expandedNodes = ref<Set<number>>(new Set())

// 切换节点展开状态
function toggleExpand(nodeId: number) {
  if (expandedNodes.value.has(nodeId)) {
    expandedNodes.value.delete(nodeId)
  }
  else {
    expandedNodes.value.add(nodeId)
  }
}

// 选择楼层
function selectFloor(floorId: number) {
  selectedFloorId.value = floorId
}

// 获取当前选中楼层的房间列表
const currentRooms = computed(() => {
  if (!selectedFloorId.value)
    return []

  // 遍历所有楼层找到对应的房间
  for (const building of buildingData.value) {
    for (const floor of building.children) {
      for (const subFloor of floor.children) {
        if (subFloor.id === selectedFloorId.value) {
          return subFloor.rooms || []
        }
      }
    }
  }
  return []
})

// 过滤后的房间列表
const filteredRooms = computed(() => {
  if (!searchKeyword.value)
    return currentRooms.value

  return currentRooms.value.filter(room =>
    room.roomNumber.toLowerCase().includes(searchKeyword.value.toLowerCase()),
  )
})

// 初始化：默认选中第一个楼层
selectedFloorId.value = 111
expandedNodes.value.add(1) // 展开A栋
expandedNodes.value.add(11) // 展开1号楼
</script>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <wd-search
        v-model="searchKeyword"
        placeholder="请输入房间号"
        :show-action="false"
        hide-cancel
      />
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 左侧树形导航 -->
      <view class="left-nav">
        <view v-for="building in buildingData" :key="building.id" class="nav-item">
          <!-- 楼栋节点 -->
          <view
            class="nav-node building-node"
            :class="{ expanded: expandedNodes.has(building.id) }"
            @click="toggleExpand(building.id)"
          >
            <view class="node-icon">
              <text class="icon-arrow" :class="{ rotate: expandedNodes.has(building.id) }">
                ▶
              </text>
            </view>
            <text class="node-text">
              {{ building.name }}
            </text>
          </view>

          <!-- 楼层节点 -->
          <view v-if="expandedNodes.has(building.id)" class="children-nodes">
            <view v-for="floor in building.children" :key="floor.id" class="nav-item">
              <!-- 楼号节点 -->
              <view
                class="nav-node floor-node"
                :class="{ expanded: expandedNodes.has(floor.id) }"
                @click="toggleExpand(floor.id)"
              >
                <view class="node-icon">
                  <text class="icon-arrow" :class="{ rotate: expandedNodes.has(floor.id) }">
                    ▶
                  </text>
                </view>
                <text class="node-text">
                  {{ floor.name }}
                </text>
              </view>

              <!-- 层级节点 -->
              <view v-if="expandedNodes.has(floor.id)" class="children-nodes">
                <view v-for="subFloor in floor.children" :key="subFloor.id" class="nav-item">
                  <view
                    class="nav-node sub-floor-node"
                    :class="{ active: selectedFloorId === subFloor.id }"
                    @click="selectFloor(subFloor.id)"
                  >
                    <view class="node-icon">
                      <text class="icon-dot">
                        ●
                      </text>
                    </view>
                    <text class="node-text">
                      {{ subFloor.name }}
                    </text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 右侧房间列表 -->
      <view class="right-content">
        <view v-if="filteredRooms.length === 0" class="empty-state">
          <text class="empty-text">
            {{ selectedFloorId ? '没有找到房间' : '请选择楼层' }}
          </text>
        </view>

        <view v-else class="room-list">
          <view v-for="room in filteredRooms" :key="room.id" class="room-item">
            <text class="room-number">
              户号:{{ room.roomNumber }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.search-bar {
  padding: 24rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
}

.main-content {
  display: flex;
  height: calc(100vh - 120rpx);
  background-color: #f5f5f5;
}

.left-nav {
  width: 300rpx;
  background-color: #ffffff;
  border-right: 1rpx solid #f0f0f0;
  overflow-y: auto;
  padding: 20rpx 0;

  .nav-item {
    width: 100%;
  }

  .nav-node {
    display: flex;
    align-items: center;
    padding: 16rpx 24rpx;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      background-color: #f5f5f5;
    }

    &.active {
      background-color: #e6f3ff;
      color: #1890ff;

      .node-text {
        color: #1890ff;
        font-weight: 500;
      }
    }

    .node-icon {
      width: 32rpx;
      height: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;

      .icon-arrow {
        font-size: 20rpx;
        color: #666;
        transition: transform 0.2s;

        &.rotate {
          transform: rotate(90deg);
        }
      }

      .icon-dot {
        font-size: 12rpx;
        color: #999;
      }
    }

    .node-text {
      font-size: 28rpx;
      color: #333;
      line-height: 1.4;
    }
  }

  .building-node {
    font-weight: 500;

    .node-text {
      font-size: 30rpx;
    }
  }

  .floor-node {
    padding-left: 56rpx;

    .node-text {
      font-size: 28rpx;
    }
  }

  .sub-floor-node {
    padding-left: 88rpx;

    .node-text {
      font-size: 26rpx;
    }
  }

  .children-nodes {
    width: 100%;
  }
}

.right-content {
  flex: 1;
  background-color: #ffffff;
  padding: 20rpx;
  overflow-y: auto;

  .empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200rpx;

    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }

  .room-list {
    display: flex;
    flex-direction: column;
    gap: 16rpx;

    .room-item {
      background-color: #f9f9f9;
      padding: 24rpx;
      border-radius: 8rpx;
      border: 1rpx solid #e6e6e6;
      transition: all 0.2s;

      &:hover {
        background-color: #f0f0f0;
        border-color: #d9d9d9;
      }

      .room-number {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8rpx;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4rpx;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
